<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
      th{
       width: 20%;
      }
    </style>
    <script>
       window.onload = function () {




         let but_sub = document.getElementById("but_sub");
         but_sub.onclick = function () {
           let b1 = checkUsername();
           if (b1) {
             document.frm.submit();
           } else {
             event.preventDefault();
             alert("格式错误");
           }
         }
       }
       function checkUsername() {
          let value = document.getElementById("usename").value;
          let regExp = RegExp(/^[A-Za-z]{6,10}$/);
          let b = regExp.test(value);
         console.log(b)
          if(b){
            document.getElementById("uspan").innerHTML = "用户名格式正确";
            document.getElementById("uspan").style.color = "green";
          }else{
            document.getElementById("uspan").innerHTML = "用户名格式错误";
            document.getElementById("uspan").style.color = "red";
          }
          return b;
       }
    </script>
</head>
<body>
  <form action="http://www.taobao.com" name="frm">
    <table border="1px" cellspacing="2px" style="width: 80%">
        <tr>
          <th>用户名</th>
          <td>
            <input type="text" name="usename" id="usename" placeholder="请输入6-10的英文字母用户名" onblur="checkUsername()">
            <span id="uspan"></span>
          </td>
        </tr>

      <tr>
        <td colspan="2" align="center">
          <input type="button" id="but_sub" value="提交">
          <input type="button" name="but_res" value="重置">
        </td>
      </tr>



    </table>
  </form>
</body>
</html>